<template>
  <div>

    <FolderHeader ref="FolderHeader" :previewId="previewId" />

    <!-- 表格 -->
    <div class="table">

      <el-table class="file_table" ref="fileTable" :data="fileData" style="width: auto">
        <el-table-column type="selection" />

        <el-table-column label="文件名" width="auto">
          <template slot-scope="scope">
            <div style="display: flex;">
              <i style="font-weight:bold;" class="el-icon-document icon-table"
                v-if="scope.row.type=='DOCUMENT_FILE'"></i>
              <i style="font-weight:bold;" class="el-icon-video-camera-solid icon-table"
                v-if="scope.row.type=='VIDEO_FILE'"></i>
              <i style="font-weight:bold;" class="el-icon-collection icon-table"
                v-if="scope.row.type=='OTHER_FILE'"></i>
              <!-- 图片 -->
              <el-image class="icon-table" style="width: 50px; height: 50px" :src="http+scope.row.virtualPath"
                fit="fill" v-if="scope.row.type == 'IMAGE_FILE'">
              </el-image>
              <!-- 文件夹 -->
              <i style="font-weight:bold;" class="el-icon-folder-opened icon-table" v-if="scope.row.type==null"></i>

              <a v-if="scope.row.folderId != null" title="点击预览"
                :href="scope.row.virtualPath != ''?http + scope.row.virtualPath:'previewErr'" target="_blank"
                style="text-decoration: none;align-self: center;color: #000;">{{scope.row.fileName}}</a>
              <a v-else title="打开文件夹"
                style="text-decoration: none;align-self: center; cursor: pointer;font-weight:bold;"
                @click="folderPreview(scope.row)">{{scope.row.folderName}}</a>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="修改时间" width="150px">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
          </template>
        </el-table-column>


        <el-table-column prop="size" label="大小" width="100px"></el-table-column>

        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <!-- 文件按钮 -->
            <template v-if="scope.row.folderId != null">
              <el-button @click="update(scope.row)" type="text" size="small">修改</el-button>
              <el-button type="text" size="small" @click="download(scope.row)">下载</el-button>
            </template>
            <!-- 文件夹按钮 -->
            <template v-else>
              <el-button @click="folderUpdate(scope.row)" type="text" size="small">修改</el-button>
              <el-button type="text" size="small" @click="folderDownload(scope.row)">下载</el-button>
            </template>
          </template>

        </el-table-column>

      </el-table>


    </div>

    <!-- 分页 -->
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <!-- 文件下载 -->
    <DownloadFile :ids="ids" :downloadOpen="downloadOpen" :folderIds="folderIds"></DownloadFile>
    <!-- 文件修改 -->
    <UpdateFile :updateOpen="updateOpen" :updateData="updateData"></UpdateFile>
    <!-- 文件夹修改 -->
    <UpdateFolder :updateOpenFolder="updateOpenFolder" :updateDataFolder="updateDataFolder"></UpdateFolder>

  </div>
</template>

<script>
  import router from "@/router"
  import apiUrl from '@/api/url'
  import link from '@/api/Link'
  import sizeTostr from '@/util/FileSizeUtil'
  import DownloadFile from '@/components/DownLoadFile.vue'
  import UpdateFile from '@/components/UpdateFile.vue'
  import FolderHeader from '@/components/FolderHeader.vue'
  import UpdateFolder from '@/components/UpdateFolder.vue'
  export default {
    name: "Folders",
    components: {
      DownloadFile,
      UpdateFile,
      FolderHeader,
      UpdateFolder,
    },
    data () {
      return {
        http: '',
        pageSize: 5,
        pageSizes: [5, 10, 20, 30],
        currentPage: 1,
        total: 0,
        fileData: [],
        folderData: [],

        pid: '',
        keyWord: '',

        updateData: {},
        updateOpen: false,
        ids: [],
        folderIds: [],
        downloadOpen: false,

        previewId: '',
        updateOpenFolder: false,
        updateDataFolder: {},
      }
    },
    methods: {
      init () {
        this.http = apiUrl.baseUrl
        let data = {
          id: this.pid,
          state: 0,
          name: this.keyWord,
          page: {
            pageSize: this.pageSize,
            pageNo: this.currentPage
          }
        }

        link(apiUrl.baseUrl + '/sys/folder/findByPage/v1', 'POST', JSON.stringify(data)).then(ok => {
          if (ok.data.code == 0) {
            this.fileData = []
            this.total = ok.data.data.total
            for (let i = 0; i < ok.data.data.childFolders.length; i++) {
              this.fileData.push(ok.data.data.childFolders[i])
            }
            for (let i = 0; i < ok.data.data.files.length; i++) {
              ok.data.data.files[i].size = sizeTostr(ok.data.data.files[i].size)
              this.fileData.push(ok.data.data.files[i])
            }
          } else {
            this.$message.error('数据请求失败：' + ok.data.msg)
          }

        })

      },
      //文件夹部分表查看按钮
      folderPreview (row) {
        this.previewId = row.id

        this.$refs.FolderHeader.syncData(this.previewId)

      },
      //文件夹部分表修改按钮
      folderUpdate (row) {
        this.updateDataFolder = JSON.parse(JSON.stringify(row))
        this.updateOpenFolder = !this.updateOpenFolder
      },
      //文件夹部分表下载按钮
      folderDownload (row) {
        this.ids = []
        let folderIds = []
        folderIds.push(row.id)
        this.folderIds = folderIds
        this.downloadOpen = !this.downloadOpen
      },

      //文件部分查看按钮
      preview (row) {
        if (row.virtualPath) {
          window.open(apiUrl.baseUrl + row.virtualPath)
        } else {
          let page = this.$router.resolve({
            name: 'previewErr',
          })
          window.open(page.href, '_blank');
        }
      },
      //文件部分修改按钮
      update (row) {
        this.updateData = JSON.parse(JSON.stringify(row))
        this.updateOpen = !this.updateOpen
      },
      //文件部分下载按钮
      download (row) {
        this.folderIds = []
        let ids = []
        ids.push(row.id)
        this.ids = ids
        this.downloadOpen = !this.downloadOpen
      },

      //分页监控
      handleCurrentChange (val) {
        this.currentPage = val
        this.init()
      },
      //分页监控
      handleSizeChange (val) {
        this.pageSize = val;
        this.init()
      },

    },
    mounted () {

    },
    watch: {

    }
  };
</script>

<style scoped>
  .folder_table {
    /* margin-bottom: 20px; */
  }

  .icon-table {
    margin-right: 10px;
    display: flex;
    align-self: center;
  }
</style>